<template>
	<view class="mall-container">
		<view class="mall-header">
			<text class="mall-title">积分商城</text>
			<text class="mall-subtitle">用积分兑换精美礼品</text>
		</view>

		<view class="products-grid">
			<view v-for="product in products" :key="product.id" class="product-card" @click="handleExchange(product)">
				<image :src="product.image" class="product-image" mode="aspectFill" />
				<view class="product-info">
					<text class="product-name">{{ product.name }}</text>
					<text class="product-desc">{{ product.description }}</text>
					<view class="product-footer">
						<text class="product-price">{{ product.points }}积分</text>
						<text class="product-stock">剩余{{ product.stock }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	// 商品数据
	const products = [
		{
			id: 1,
			name: '优惠券',
			description: '平台通用优惠券',
			image: '/static/images/coupon.png',
			points: 100,
			stock: 99
		},
		{
			id: 2,
			name: '会员体验卡',
			description: '7天VIP会员体验',
			image: '/static/images/vip-card.png',
			points: 500,
			stock: 50
		},
		{
			id: 3,
			name: '专属头像框',
			description: '限量版头像装饰',
			image: '/static/images/avatar-frame.png',
			points: 200,
			stock: 20
		},
		{
			id: 4,
			name: '积分加成卡',
			description: '获得积分+50%，持续3天',
			image: '/static/images/boost-card.png',
			points: 300,
			stock: 30
		}
	]

	// 兑换商品
	const handleExchange = (product : any) => {
		uni.showModal({
			title: '确认兑换',
			content: `确定要用${product.points}积分兑换${product.name}吗？`,
			success: (res) => {
				if (res.confirm) {
					// 这里调用兑换接口
					uni.showToast({
						title: '兑换成功',
						icon: 'success'
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.mall-container {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.mall-header {
		margin-bottom: 30rpx;

		.mall-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 8rpx;
			display: block;
		}

		.mall-subtitle {
			font-size: 24rpx;
			color: #666;
		}
	}

	.products-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}

	.product-card {
		background: #f8f9ff;
		border-radius: 16rpx;
		overflow: hidden;

		.product-image {
			width: 100%;
			height: 200rpx;
			background: linear-gradient(135deg, #667eea, #764ba2);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 60rpx;
		}

		.product-info {
			padding: 20rpx;

			.product-name {
				font-size: 26rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 8rpx;
				display: block;
			}

			.product-desc {
				font-size: 22rpx;
				color: #666;
				margin-bottom: 15rpx;
				display: block;
			}

			.product-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.product-price {
					font-size: 24rpx;
					color: #667eea;
					font-weight: bold;
				}

				.product-stock {
					font-size: 20rpx;
					color: #999;
				}
			}
		}
	}
</style>